<template>
  <Dialog v-model="visible" :title="title" width="90%">
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="150px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="名 称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编 码" prop="code">
            <el-input v-model="form.code" placeholder="请输入编码" maxLength="8" />
            请输入店铺编码,可输入数字和大小写字母的组合,最长8位
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="营业状态" prop="status">
            <el-radio-group v-model="form.status" class="ml-4">
              <el-radio label="1" size="large">营业中</el-radio>
              <el-radio label="0" size="large">暂停营业</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="地 区" prop="region">
            <el-cascader v-model="form.region" :options="options" :props="props" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="详细地址" prop="detailAddress">
            <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="经 度" prop="lat">
            <el-input v-model="form.lat" placeholder="请输入经度" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="纬 度" prop="lng">
            <el-input v-model="form.lng" placeholder="请输入纬度" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="购物车" prop="cart">
            <el-radio-group v-model="form.cart" class="ml-4">
              <el-radio label="1" size="large">开启</el-radio>
              <el-radio label="0" size="large">关闭</el-radio>
            </el-radio-group>
            关闭购物车后,商品仅支持单独购买并结算,请谨慎操作。
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="物流范围" prop="deliveryArea">
            <el-radio-group v-model="form.deliveryArea" class="ml-4">
              <el-radio label="locale" size="large">仅支持同城</el-radio>
              <el-radio label="global" size="large">支持全国</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="门店自提" prop="obs">
            <el-radio-group v-model="form.obs" class="ml-4">
              <el-radio label="1" size="large">支持</el-radio>
              <el-radio label="0" size="large">不支持</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="订单退款选项" prop="refund">
            <el-select v-model="form.refund" filterable placeholder="请输入关键词" reserve-keyword>
              <el-option
                v-for="item in refundOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="非营业时间操作" prop="nonBusinessHoursShow">
            <el-select
              v-model="form.nonBusinessHoursShow"
              filterable
              placeholder="请输入关键词"
              reserve-keyword
            >
              <el-option
                v-for="item in nonBusinessHoursShowOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="微信AppId" prop="appIdWxpay">
            <el-input v-model="form.appIdWxpay" placeholder="请输入微信AppId" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="微信appSecret" prop="appSecret">
            <el-input v-model="form.appSecret" placeholder="请输入微信appSecret" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="微信商户号" prop="mchId">
            <el-input v-model="form.mchId" placeholder="请输入微信商户号" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="微信支付API密钥" prop="mchKey">
            <el-input v-model="form.mchKey" placeholder="请输入微信支付API密钥" max="32" min="32" />
            请输入32个字符,可输入数字和大小写字母的组合
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="微信API数字证书" prop="keyFiles">
            文件名通常为apiclient_cert.pem
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="微信API私钥文件" prop="keyFiles">
            文件名通常为apiclient_key.pem
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="支付宝AppId" prop="appIdAlipay">
            <el-input v-model="form.appIdAlipay" placeholder="请输入支付宝AppId" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="支付宝私钥" prop="merchantPrivateKey">
            <el-input v-model="form.merchantPrivateKey" placeholder="请输入支付宝私钥" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="支付宝证书" prop="alipayFiles" />
        </el-col>

        <el-col :span="24">
          <el-form-item label="备 注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="loading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="MerchantForm" setup>
import * as Api from '@/api/userCenter/tradeOrder/merchant/merchant'

const message = useMessage() // 消息弹窗

const visible = ref(false) // 弹窗的是否展示
const title = ref(`编辑信息`) // 弹窗的标题
const loading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const form = ref({
  id: '',

  name: '',

  code: '',

  status: '1',

  businessHours: '1',

  cart: '1',

  areaId: '',

  address: '',

  obs: '0',

  nonBusinessHoursShow: 'order',

  refund: '0',

  province: '',

  city: '',

  region: '',

  detailAddress: '',

  lat: '',

  lng: '',

  deliveryArea: 'locale',

  remark: '',

  appIdWxpay: '',

  appSecret: '',

  mchId: '',

  mchKey: '',

  keyFiles: '',

  appIdAlipay: '',

  merchantPrivateKey: '',

  alipayFiles: ''
})
const formRules = reactive({
  name: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '商户编码不能为空', trigger: 'blur' }]
})

const nonBusinessHoursShowOptions = ref([
  { value: 'order', label: '商品可下单,下次营业时间再配送' },
  { value: 'goods', label: '商品可展示,不可下单购买' }
])

const refundOptions = ref([
  { value: '0', label: '所有订单均需人工审核后才可退款' },
  { value: '1', label: '"已支付未发货"订单不需人工审核直接退款' },
  { value: '2', label: '"已支付未核销"虚拟凭证订单不需人工审核直接退款' }
])

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id?: string) => {
  visible.value = true

  resetForm()
  // 修改时,设置数据
  if (id) {
    loading.value = true
    form.value.id = id
    try {
      let val = await Api.getById(id)
      if (val) {
        form.value = val
      }
    } catch (t) {
      console.log(t)
    } finally {
      loading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  loading.value = true
  try {
    const data = form.value as unknown as Api.Model
    await Api.update(data)
    message.success(`操作成功`)
    visible.value = false
    // 发送操作成功的事件
    emit('success')
  } catch (t) {
    console.log(t)
    loading.value = false
    message.error('提交表单失败')
  } finally {
    loading.value = false
  }
}

/** 重 置表单 */
const resetForm = () => {
  form.value = {
    id: '',

    name: '',

    code: '',

    status: '1',

    businessHours: '1',

    cart: '1',

    areaId: '',

    address: '',

    obs: '0',

    nonBusinessHoursShow: 'order',

    refund: '0',

    province: '',

    city: '',

    region: '',

    detailAddress: '',

    lat: '',

    lng: '',

    deliveryArea: 'locale',

    remark: '',

    appIdWxpay: '',

    appSecret: '',

    mchId: '',

    mchKey: '',

    keyFiles: '',

    appIdAlipay: '',

    merchantPrivateKey: '',

    alipayFiles: ''
  }
  formRef.value?.resetFields()
}
</script>
